<script setup lang="ts">
// 新版本更新提示弹窗
import { computed, ref } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import {addUserReviewVersionAction} from "@/service/api";
import {localStg} from "@/utils/storage";
import {USER_INFO} from "@/utils/const";

interface Props {
  show: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  show: false
});

const emit = defineEmits(['update:show', 'updateLogClick']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

// 更新日志
function updateLogClick() {
  emit('updateLogClick');
  experienceNowClick();
}

const userInfo = localStg.get(USER_INFO);

// 立即体验
async function experienceNowClick() {
  modalShowValue.value = false;
  const params: any = {
    userId: userInfo?.user.userId,
    moduleId: localStg.get('moduleId') || 1
  };
  const {data, error} = await addUserReviewVersionAction(params);
  if (!error) {
    console.log('data: ', data);
  }
}
</script>

<template>
  <NModal v-model:show="modalShowValue" preset="card" class="w-580px" :mask-closable="false" @close="experienceNowClick">
    <div>
      <span class="block text-18px font-bold">小主，智标宝为了给你带来更好的使用体验已完成最新版产品升级!</span>
      <span class="text-18px font-bold">赶快体验吧!</span>
    </div>
    <div class="mb-10px mt-10px flex-x-center">
      <span>(更新内容请前往“更新日志”查看)</span>
    </div>
    <template #footer>
      <NSpace class="w-full" :size="24" justify="center">
        <NButton class="log-btn" @click="updateLogClick">更新日志</NButton>
        <NButton class="taste-btn" @click="experienceNowClick">立即体验</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped lang="scss">
.log-btn {
  width: 140px;
  height: 42px;
  background: #e8e8e8;
  border-radius: 4px;
  font-weight: 400;
  font-size: 16px;
  color: #7c7c7c;
  line-height: 42px;
  border: none;
}
.log-btn:hover {
  background: #e8e8e8;
  color: #7c7c7c;
  border: none;
}
.taste-btn {
  width: 140px;
  height: 42px;
  background: linear-gradient(180deg, #e877ae, #7c73f3);
  border-radius: 4px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 42px;
  border: none;
}
.taste-btn:hover {
  background: linear-gradient(180deg, #e877ae, #7c73f3);
  color: #ffffff;
}
</style>
